<template>
	<div :class="mode">
		<div class="head">
			<div class="head-title">
				<div class="head-title-new">NEW</div>
				<div class="head-title-hot">HOT</div>
				<div class="head-title-text">楽天市場での店舗名変更方法とは？売れる店名に見直して中国仕入れ商品などを効果的にアピールしよう</div>
			</div>
			<div class="head-tags">
				<div class="head-tags-item" v-for="value in 10"><div>中国进出口基础建设知识</div></div>
			</div>
			<div class="head-share">
				<div class="head-share-item" v-for="value in icons">
					<div class="head-share-item-icon"><img :src="value.icon" alt="" /></div>
					<div class="head-share-item-text">{{ value.text }}</div>
				</div>
			</div>
			<div class="head-time" v-if="mode === 'pc'">
				<div class="head-time-update">
					<TimeLook :is-show="isShow" @update:open="isShow = !isShow" />
				</div>
				<div class="head-time-upload"><span class="gray">上传时间：</span><span class="black">2025-02-03 15:20</span></div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import self from '@/assets/svgs/self.svg';
	import facebook from '@/assets/svgs/facebook.svg';
	import twitter from '@/assets/svgs/twitter.svg';
	const props = defineProps({
		mode: {
			type: String,
			default: 'pc',
		},
		headInfo: {
			type: Object,
			default: () => ({}),
		},
	});
	const isShow = ref(false);
	const icons = [
		{
			icon: facebook,
			text: '分享至Facebook',
		},
		{
			icon: twitter,
			text: '分享至Twitter',
		},
		{
			icon: self,
			text: '复制链接',
		},
	];
</script>

<style lang="scss" scoped>
	/* 公共样式抽离：PC 与 Mobile 共用 */
	.head {
		border-bottom: 1px solid #e5e6eb;
	}
	.head-title {
		margin-bottom: 25px;
	}
	.head-title-new,
	.head-title-hot {
		width: 60px;
		height: 24px;
		margin-right: 8px;
		text-align: center;
		color: white;
		border-radius: var(--blog-box-radius);
		float: left;
		transform: translateY(10px);
	}
	.head-tags {
		width: 100%;
		border-radius: var(--blog-box-radius);
		@include flex(_, flex-start, flex-start);
		@include text-overflow();
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.head-tags-item {
		border-radius: var(--blog-box-radius);
		@include flex();
		@include text-overflow();
		background-color: var(--blog-box-bg-color-gray);
		&:last-child {
			margin-right: 0;
		}
		div {
			@include text-overflow();
		}
	}
	.head-share {
		@include flex(_, flex-start);
		gap: 20px;
		margin-bottom: 20px;
	}
	.head-share-item {
		@include flex();
	}

	.pc {
		.head {
			margin: 100px auto;
			width: 1014px;
			.head-title {
				.head-title-new,
				.head-title-hot {
                    @include font(_, 14px, 22px, 900);
				}
				.head-title-new {
					background-color: var(--blog-box-bg-color-blue);
				}
				.head-title-hot {
					background-color: var(--blog-box-bg-color-red);
				}
				.head-title-text {
					@include font(_, 30px, 45px, 700, var(--blog-normal-text-color));
				}
			}
			.head-tags {
				gap: 10px;
				.head-tags-item {
					width: 100px;
					height: 28px;
					padding: 10px;
					@include font(_, 12px, 20px, 400, var(--blog-tag-text-color));
				}
			}
			.head-share {
				.head-share-item {
					.head-share-item-icon {
						$size: 20px;
						width: $size;
						height: $size;
						margin-right: 10px;
					}
					.head-share-item-text {
						@include font(_, 14px, 22px, 400, var(--blog-normal-text-color-black));
					}
				}
			}
			.head-time {
				flex-grow: 0;
				@include flex(_, space-between);
				margin-bottom: 10px;
				.head-time-upload {
					@include font(_, 14px, 22px, 400, var(--blog-normal-text-color-black));
				}
			}
		}
	}
	.mobile {
		.head {
			margin: 50px auto;
			width: 670px;
			.head-title {
				@include text-overflow(2, 'float');
				.head-title-new,
				.head-title-hot {
					@include font(_, 20px, 28px, 700);
					@include flex;
				}
				.head-title-new {
					background-color: var(--blog-box-bg-color-blue);
				}
				.head-title-hot {
					background-color: var(--blog-box-bg-color-red);
				}
				.head-title-text {
					@include font(_, 28px, 42px, 700, var(--blog-normal-text-color));
				}
			}
			.head-tags {
				gap: 20px;
				.head-tags-item {
					width: 152px;
					height: 36px;
					padding: 10px 20px;
					@include font(_, 20px, 20px, 350, var(--blog-tag-text-color));
				}
			}
			.head-share {
				.head-share-item {
					.head-share-item-icon {
						$size: 34px;
						width: $size;
						height: $size;
						margin-right: 10px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.head-share-item-text {
						@include font(_, 20px, 30px, 400, var(--blog-normal-text-color-black));
					}
				}
			}
		}
	}
</style>
